<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="770"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                <span v-if="baTable.form.operate == 'Add'">{{ t('添加') }}</span>
                <span v-if="baTable.form.operate == 'Edit'">{{ t('编辑') }} {{ baTable.form.items!.contract }}({{ baTable.form.items!.batch }})</span>
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                style="width: 850; padding: 15px;"
            >

            <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="t('基础信息')" name="one">
                    <el-form
                        v-if="!baTable.form.loading"
                        ref="formRef"
                        @submit.prevent=""
                        :model="baTable.form.items"
                        label-position="top"
                        :inline="true"
                        :label-width="baTable.form.labelWidth + 'px'"
                    >
                        <FormItem :label="t('客户名')" type="remoteSelect" v-model="baTable.form.items!.customer_id" :required="true" :input-attr="{ onChange: changeCustomer, pk: 'id', field: 'corp_name_ko', 'remote-url': '/system/customer/index' }" />
                        <FormItem v-if="filter.id != 2" :label="t('供货商')" type="remoteSelect" v-model="baTable.form.items!.supplier_id" :input-attr="{ pk: 'id', field: 'corp_name_cn', 'remote-url': '/system/corp.Supplier/index' }" />
                        <el-form-item :label="t('订单类型')" :required="true">
                            <el-cascader @change="changeType" v-model="baTable.form.items!.type" :options="options" :props="props" />
                        </el-form-item>
                        <FormItem :label="t('下单时间')" type="date" v-model="baTable.form.items!.create_time" style="width: 354px;" :required="true" />
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :label="t('退税信息')" name="second">
                    <el-form
                        v-if="!baTable.form.loading"
                        ref="formRef"
                        @submit.prevent=""
                        :model="baTable.form.items"
                        label-position="top"
                        :inline="true"
                        :label-width="baTable.form.labelWidth + 'px'"
                    >
                        <el-form-item :label="t('退税状态')">
                            <el-select v-model="baTable.form.items!.drawback_status" placeholder=" " clearable>
                                <el-option :label="t('无需退税')" value="1" />
                                <el-option :label="t('等待提交退税')" value="2" />
                                <el-option :label="t('退税审核中')" value="3" />
                                <el-option :label="t('退税完成')" value="4" />
                            </el-select>
                        </el-form-item>
                        <FormItem v-if="!baTable.form.items!.neixiao" :label="t('发票号码')" type="string" v-model="baTable.form.items!.invoice_no" />
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :label="t('物流信息')" name="third">
                    <el-form
                        v-if="!baTable.form.loading"
                        ref="formRef"
                        @submit.prevent=""
                        :model="baTable.form.items"
                        label-position="top"
                        :inline="true"
                        :label-width="baTable.form.labelWidth + 'px'"
                    >
                        <el-form-item :label="t('物流状态')">
                            <el-select v-model="baTable.form.items!.logistics_status" placeholder=" " clearable>
                                <el-option :label="t('待发货')" value="1" />
                                <el-option :label="t('已发货')" value="2" />
                                <el-option :label="t('已收货')" value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="!baTable.form.items!.neixiao" :label="t('运输方式')" style="width: 354px;">
                            <el-select v-model="baTable.form.items!.shipment" placeholder=" " clearable>
                                <el-option :label="t('海运')" value="sea" />
                                <el-option :label="t('空运')" value="air" />
                                <el-option :label="t('陆运')" value="land" />
                            </el-select>
                        </el-form-item>
                        <FormItem :label="t('报关单号')" type="number" v-model="baTable.form.items!.bgd_no" />
                        <FormItem :label="t('出口日期')" type="date" v-model="baTable.form.items!.export_date" style="width: 354px;" />
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :label="t('其他信息')" name="fourth">
                    <el-form
                        v-if="!baTable.form.loading"
                        ref="formRef"
                        @submit.prevent=""
                        :model="baTable.form.items"
                        label-position="top"
                        :inline="true"
                        :label-width="baTable.form.labelWidth + 'px'"
                    >

                        <FormItem :label="t('订单号')" type="string" v-model="baTable.form.items!.contract" />
                        
                        
                        <FormItem v-if="!baTable.form.items!.neixiao" :label="t('汇率')" type="number" v-model="baTable.form.items!.exchange" />

                        <el-form-item v-if="!baTable.form.items!.neixiao" :label="t('成交方式')" style="width: 354px;">
                            <el-select v-model="baTable.form.items!.deal_type" placeholder=" " clearable>
                                <el-option :label="t('CIF')" value="CIF" />
                                <el-option :label="t('FOB')" value="FOB" />
                                <el-option :label="t('EXW')" value="EXW" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
                
                
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('取消') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('保存') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, TabsPaneContext  } from 'element-plus'

import { useFilter } from '/@/stores/filter'

const filter = useFilter();

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

import { getProductApi, getProductInfoApi } from '/@/api/most/customer/product'

const { t } = useI18n()


const state = reactive({
    activeName: 'one'
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
    
}


const changeProduct = () => {
    
    let product_ids = baTable.form.items!.product_ids;
    getProductInfoApi({ product_ids: product_ids }).then((e) => {
        baTable.form.items!.product = e.data;
    })
}

const changeType = () => {
    let type = baTable.form.items!.type
    console.log(type)
    if(type[0] == '内销'){
        baTable.form.items!.neixiao = true;
    }else{
        baTable.form.items!.neixiao = false;
    }
}

const changeCustomer = () => {
    let customer_id = baTable.form.items!.customer_id;
    if(customer_id == ''){
        baTable.form.items!.selectProductStatus = true;
        baTable.form.items!.product = [];
    }else{
        baTable.form.items!.selectProductStatus = false;
        getProductApi({ customer_id: customer_id }).then((e) => {  // 获取产品列表。 
            baTable.form.items!.product_list = e.data;
        })
    }
}

const props = {
    expandTrigger: 'hover',
}



const options = [
    {
        value: '出口',
        label: t('出口'),
        children: [{
            value: '买入交易',
            label: t('买入交易'),
        }, {
            value: '佣金交易',
            label: t('佣金交易'),
        }],
    },{
        value: '进口',
        label: t('进口'),
        children: [{
            value: '买入交易',
            label: t('买入交易'),
        }, {
            value: '佣金交易',
            label: t('佣金交易'),
        }],
    },{
        value: '内销',
        label: t('内销'),
        children: [{
            value: '买入交易',
            label: t('买入交易'),
        }, {
            value: '佣金交易',
            label: t('佣金交易'),
        }],
    },
]

</script>

<style scoped lang="scss">
.el-form {
    --el-form-label-font-size: var(--el-font-size-base);
    --el-form-inline-content-width: 354px;
}
.el-form--inline .el-form-item:nth-child(even) {
    margin-right: 0;
}

.el-radio-group{
    width: 354px;
}
</style>
